<!--
 * @Descripttion: 人员通行
 * @version:
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-08-10 14:16:14
-->

<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区：">
            <el-select
              v-model="filters.CID"
              filterable
              @change="handleQuery"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select
              v-model="filters.remark"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option label="未读" value="0"></el-option>
              <el-option label="已读" value="1"></el-option>
            </el-select>
          </el-form-item>
             <el-form-item label="起始时间：">
            <el-date-picker
             class="normal"
            v-model="filters.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="选择日期时间">
           </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
         <el-date-picker
             class="normal"
               v-model="filters.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="选择日期时间">
           </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button type="primary" @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content" v-if="showadd == true">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column
            prop="person"
            header-align="center"
            align="center"
            label="姓名"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.person ? scope.row.person.name : "-" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="person"
            header-align="center"
            align="center"
            label="英文名"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.person ? scope.row.person.englishName : "-"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类型"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.type ? scope.row.type : "-" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="person"
            header-align="center"
            align="center"
            label="性别"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.person.gender == 0">男</span>
                <span v-if="scope.row.person.gender == 1">女</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="CName"
            header-align="center"
            align="center"
            label="小区名称"
          ></el-table-column>

          <el-table-column
            prop="person"
            header-align="center"
            align="center"
            label="详情地址"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.person ? scope.row.person.address : "-"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="insertTime"
            header-align="center"
            align="center"
            label="通行时间"
          ></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.remark == 0"
                  size="mini"
                  type="primary"
                  @click="handeEdit(scope.row)"
                  v-show="hasPerm('news:borders:unread')"
                  >未读</el-button
                >
                <el-button
                  v-else
                  size="mini"
                  type="warning"
                  disabled
                  v-show="hasPerm('news:borders:unread')"
                  >已读</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer">
        <!-- <el-button :disabled="selections.length === 0"  type="danger"
        style="float:left" @click="batchDelete">批量删除</el-button>-->
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <!-- 详情的弹窗 -->
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showadd: true, //预警设置开关
      aside: false,
      asideShow: false,
      unitShow: false,
      viewVisible: false,
      pageResult: [],
      selections: [],
      dataFormView: [],
      filters: {
        CID: "",
        startTime: "",
        endTime: "",
        status: "",
        type: "",
        Sex: "",
        personName: "",
        Idcard: "",
      },
      pageRequest: {
        page: 1,
        limit: 10,
      },
      columns: [],
      loading: false,
      totalSize: 0,
      options: [
        {
          value: 0,
          label: "陌生人",
        },
        {
          value: 1,
          label: "非陌生人",
        },
      ],
      optionsSex: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
      getCommunity: [],
    };
  },
  methods: {
    // 修改已读状态
    handeEdit(row) {
      let that = this;

      let params = {
        _id: row._id,
        where: {
          remark: 1,
        },
      };
      this.$confirm("确认标记已读？", "提示", "warning").then(() => {
        let param = JSON.stringify(params);

        this.$api.warn.sys_pass_borderupdate(param).then((res) => {
          if (res.code == 0) {
            this.handleQuery();
          }
        });
      });
    },
    // 获取分页数据
    handleQuery: function (val) {
      this.loading = true;
      let params = {};
      params = {
        where: this.filters,
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit,
      };

      let param = JSON.stringify(params);

      this.$api.warn
        .sys_pass_border(params)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            this.pageResult = res.data;
            this.totalSize = res.count;
            this.pageResult.map((item) => {
              item.insertTime = this.$format(item.insertTime);
              if (item.device) {
                item.IName = item.device.Name;
              }
              // if (item.person) {
              //   // .slice(0,3)+"****"+item.phone.slice(7,11)
              //   item.name = item.person.info.Name || "";
              //   item.Idcard =
              //     item.person.info.Idcard.slice(0, 4) +
              //       "****" +
              //       item.person.info.Idcard.slice(16, 18) || "";
              //   item.Sex = item.person.info.Sex || "/";
              // }
              // item.picImg = this.global.baseUrlImage + "pic/" + item.pic;
            });
            this.loading = false;
          } else {
            this.loading = false;
            this.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        })
        .catch((err) => {
          this.$message.error("网络超时");
        });
    },
    keyEvent: function (e) {
      let event = e || window.event;
      if (event) {
        this.handleQuery();
      }
    },

    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "pic/" + id;
      return url;
    },
    //获取小区的列表选择器
    getCommunityList() {
      let params = {};
      params = {
        where: {
          CODES: [],
        },
      };

      let param = JSON.stringify(params);

      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          this.getCommunity = res.data;

          // this.pageResult.map(item => {
          //   item.insertTime = this.$format(item.insertTime);

          // });
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },

    // 显示预警编辑
    handleEid: function () {
      this.showadd = false;
    },
    // 显示编辑界面
    handleEdit: function (params) {
      this.viewVisible = true;
      // this.operation = false;

      this.dataFormView = params;
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        // let params = this.getDeleteIds([], row);
        let params = {
          DID: row.DID,
        };

        var paramJson = JSON.stringify(params);
        this.$api.dict.batchDelete(paramJson).then((res) => {
          if (res.code == 0) {
            this.handleQuery();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 批量删除
    batchDelete() {
      this.$confirm("确认删除选中用户吗？", "提示", "warning").then(() => {
        let selLength = this.selections.length;
        let totalLength = this.pageResult.length;
        let isReduce = selLength == totalLength ? true : false;
        let params = this.selections
          .map((item) => {
            return item.DID;
          })
          .join(",");
        this.$api.dict
          .batchDelete({
            DID: params,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              if (isReduce) {
                this.pageRequest.page--;
              }
              this.handleQuery();
            } else {
              this.$message.error(res.msg);
            }
          });
      });
    },
    // 编辑
    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            // let params = Object.assign({}, this.dataForm);let password = this.$md5(this.loginForm.password);

            let params = Object.assign(this.dataForm);
            // let params = {
            //   DID: this.dataForm.DID,
            //   where: {
            //     _id: this.dataForm._id
            //   }
            // };

            let paramJson = JSON.stringify(params);
            this.$api.dict.save(paramJson).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.dialogVisible = false;
                this.$refs["dataForm"].resetFields();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
              this.handleQuery(null);
            });
          });
        }
      });
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;

      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    },
  },
  mounted() {
    this.filters.CID = localStorage.getItem("home_CID");
    this.handleQuery();
    this.getCommunityList();
  },
};
</script>

<style>
</style>
